<template>
	<view class="merchantEnter">
		<tui-navigation-bar   :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			@init="initNavigation" title="商家入驻" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		<view class="merchantEnter_content" :style="{ marginTop: marginTp + 'px' }">
			<!-- 基础信息 -->
			<view class="infoTitle">
				<image class="contentImg" src="/static/user/my/icon_line2@2x.png" mode="aspectFill"></image>
				<view class="contentText"><text>基础信息</text></view>
			</view>
			<view class="inputItem">
				<view class="label"><text>店铺名称</text></view>
				<view class="divide"></view>
				<view class="input">
					<tui-input v-model="merchantName" padding="0" :size="28" :borderBottom="false" :borderTop="false" placeholder="请输入名称" clearable></tui-input>
				</view>
			</view>
			<view class="inputItem">
				<view class="label"><text>店铺地址</text></view>
				<view class="divide"></view>
				<view class="input"  @tap="selectAdress">
					<view class="textFont ellipsis">{{ address ||'请选择店铺地址' }}</view>
				</view>
			</view>
			<view class="inputItem">
				<view class="label"><text>负责人</text></view>
				<view class="divide"></view>
				<view class="input">
					<tui-input v-model="chargePerson" padding="0" :size="28" :borderBottom="false" :borderTop="false" placeholder="请输入姓名" clearable ></tui-input>
				</view>
			</view>
			<view class="inputItem">
				<view class="label"><text>联系方式</text></view>
				<view class="divide"></view>
				<view class="input">
					<tui-input v-model="contactNumber" padding="0" :size="28" :borderBottom="false" :borderTop="false" placeholder="请输入联系方式" clearable ></tui-input>
				</view>
			</view>
			<!-- <view class="inputItem">
				<view class="label"><text>商业球房</text></view>
				<view class="divide"></view>
				<view class="select">
					<view :class="selectActive ? 'man active' :'man'">
						<image v-if="selectActive" class="slectImg" src="/static/user/my/icon_radio1@2x.png"></image>
						<image v-else class="slectImg" src="/static/user/my/icon_radio2@2x.png"></image>
						<view class="manText"><text>是</text></view>
					</view> 
					<view :class="!selectActive ? 'girl active' :'girl'">
							<image v-if="!selectActive" class="slectImg" src="/static/user/my/icon_radio1@2x.png"></image>
							<image v-else class="slectImg" src="/static/user/my/icon_radio2@2x.png"></image>
							<view class="girlText"><text>否</text></view>
					</view> 
				</view>
			</view> -->
			<view class="textareaItem">
				<view class="label"><text>备注信息</text></view>
				<view class="divide"></view> 
					 <tui-textarea v-model="remark" :size="28" padding="0" :borderBottom="false" :borderTop="false" height="200rpx"   placeholder="请输入备注信息..."></tui-textarea> 
			</view> 
		</view>
		  	<view class="footer">
					<tui-form-button  @click="submitMerchant" margin="24rpx 0 0 0"  radius="40rpx" :size="32" color="#fff" width="690rpx" height="84rpx" background="#2FD7D3"> 
						提交申请
					</tui-form-button>
			</view>
	</view>
</template>

<script>
	import { shopMerchant } from "@/http/api/shop/shop.js"
	import Cache from "@/utils/cache"; 
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp: 0,
				contactNumber:'',//联系方式
				chargePerson:'',//负责人
				remark:'',//备注
				merchantName:'',//店铺名称
				addressInfo:{
					latitude: '', // 纬度
					longitude: '', // 经度
					name: '', // 名称
					poi:{}
				},
				address:'',//地址 
				isCommerce:'0',//是否商业 0是  1否 
				selectActive:true //默认商业
			}
		}, 
		onLoad(){ 
			this.addressInfo.latitude=Cache.get('latitude') || '39.54'
			this.addressInfo.longitude=Cache.get('longitude') ||  '116.25'
			this.address=Cache.get('adressNmae')
			uni.$on('adressInfo',(e)=>{
				this.addressInfo.latitude=e.latitude
				this.addressInfo.longitude=e.longitude
				this.addressInfo.name=e.name
				this.addressInfo.poi=e.poi  
				this.addressInfo=e
				this.address=e.name
			}) 
		},
		methods: {  
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack({
							        delta: 1
							    });;
			},
			selectAdress(){
				let info ={ 
					 latitude:this.addressInfo.latitude,
					 longitude:this.addressInfo.longitude,
					 name: this.address, // 名称
					 address: this.address, // 详细地址
				}
				uni.navigateTo({
					url:'/pages/tutorControl/modules/addressSelect/addressSelect?info='+JSON.stringify(info)
				})
			},
			//提交申请
			submitMerchant(){
					if (!this.merchantName) {
						this.$utils.toast('请输入店铺名称');
						return false;
					}
					if (!this.chargePerson) {
						this.$utils.toast('请输入负责人');
						return false;
					} 
					if (!this.contactNumber) {
						this.$utils.toast('请输入联系方式');
						return false;
					}
					 if (!this.$regexp.phone.test(this.contactNumber)) {
						this.$utils.toast('请输入正确的联系方式');
						return false;
					} 
					if (!this.address) {
						this.$utils.toast('请输入地址');
						return false;
					} 
					shopMerchant({
						contactNumber:this.contactNumber,//联系方式
						chargePerson:this.chargePerson,//负责人
						remark:this.remark,//备注
						merchantName:this.merchantName,//店铺名称
						address:this.address,//地址 
						coordinates:{
							lat:this.addressInfo.latitude,
							lng:this.addressInfo.longitude,
						},
						// isCommerce:this.selectActive?'0':'1',//是否商业 0是  1否 
					}).then(res=>{
						if(res.code===200){
							this.$utils.toast('商家入驻申请提交成功')
							setTimeout(()=>{ 
								uni.navigateBack({
							        delta: 1
							    });;
							},500)
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './merchantEnter.scss';
 
	.ellipsis{
		white-space: nowrap; // 防止换行
		overflow: hidden; // 隐藏溢出内容
		text-overflow: ellipsis; // 溢出部分显示省略号
		width: 400rpx;
	}
</style>